<template>
  <div>

	<!-- <myfooter></myfooter> -->
	<myheader></myheader>
	<br><br>
	
	<Breadcrumb :datas="datas"></Breadcrumb>
	<!-- <Breadcrumb></Breadcrumb> -->

	<section class="featured-block text-center">
		<div class="container">
			
		
			<div>
			用户名 : <input type="text" v-model="username" />
			</div>

			<br /><br />

			<div>
				密码 : <input type="password" v-model="password" />
			</div>

			<br /><br />
			<center>
			<div>

				<drag-verify
				:width="width"
				:heigth="heigth"	
				:text="text"
				ref="Verify"
				>
				<!-- :ref="Verify" -->
				</drag-verify>

			</div>
			</center>

			<br>
			
			<div>
				
			</div>
			
			<br>

			<Button @click="submit">登录</Button>
			&nbsp;
			<img @click="sina" src="http://127.0.0.1:8000/static/sina.png">
			&nbsp;
			<img @click="dingding" src="http://127.0.0.1:8000/static/dingding.png">



			



		</div>
	</section>
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

//导入滑块验证码
import dragVerify from 'vue-drag-verify';

export default {
  data () {
    return {
	//面包屑导航
   		datas:[{title:'首页',route:{name:'index'}},{title:'登录'}],
		msg: "这是一个变量",
		username:'',
		password:'',
		code:'',
		width:300,
		heigth:42,
		text:"请将滑块拖动到右侧"
		
    }
	
  },
  //定义组件
  components:{
	'myheader':myheader,
	'dragVerify':dragVerify,
	'myfooter':myfooter,
  },
  mounted:function(){

   
  
},
methods:{

	//钉钉登录
	dingding(){

	var appid = 'dingoaukgkwqknzjvamdqh';
    var redirect_uri = 'http://localhost:8000/dingding_back/';

	var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
	
	window.location.href = url;


	},
	
	// 新浪微博登录
	sina(){

		let url = "https://api.weibo.com/oauth2/authorize?client_id=2636039333&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

		//跳转
		window.location.href = url;

	},
	
	//提交事件
	submit:function(){

		//判断是否拖动滑块
		console.log(this.$refs.Verify.isPassing);
		  
		//判断
		if(this.username == ''){

			this.$Message('用户名不能为空');
			return false;
		}

		if(this.password == ''){

			this.$Message('密码不能为空');
			return false;
		}
		
		if(this.$refs.Verify.isPassing==false){
			this.$Message('请滑动验证');
			return false;
		}


		//请求后台接口
		this.axios.get('http://localhost:8000/login/',{params:{username:this.username,password:this.password}}).then((result) =>{

			console.log(result);
			this.$Message(result.data.message);

			// 判断登录
			if(result.data.code==200){

				localStorage.setItem('username', result.data.username),
				localStorage.setItem('uid', result.data.uid),

				// 跳转页面
				this.$router.push('/')
				
			}else{
				this.$Message(result.data.message)
			}

		});


	}
     
  }
}


</script>
 
<style>



</style>